// miniprogram/pages/chart/f2-canvas-load/f2-canvas-load.js
import chart_data from '../../../libs/data_chart'

Page({
  data: {
    opts: {
      lazyLoad: true // 延迟加载组件
    },
    update: false,
    requestData: null // 异步请求获取的数据
  },
  onLoad: function (options) {
    this.getSalesTrend()
  },
  //更新数据监听
  updateDataClick() {
    const data = chart_data.data_sales_m
    var chartComponent = this.selectComponent('#column-dom');
    chartComponent.chart.changeData(data)
    this.setData({
      update: true
    })
  },
  //获取图表数据
  getSalesTrend: function () {
    const self = this
    self.chartComponent = self.selectComponent('#column-dom');
    self.chartComponent.init((canvas, width, height, F2) => {
      const data = chart_data.data_sales
      //此处data数据可通过 异步获取数据
      const chart = new F2.Chart({
        el: canvas,
        width,
        height
      });

      chart.source(data, {
        sales: {
          tickCount: 5
        }
      });
      chart.tooltip({
        showItemMarker: false,
        onShow(ev) {
          const {
            items
          } = ev;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = '¥ ' + items[0].value;
        }
      });
      chart.interval().position('year*sales');
      chart.render();
      return chart;
    })
  }
})